<template>
  <view class="common-card f_row_center">
    <view @click="itemClick(ind)" class="flex_1 f_column_center" v-for="(item,ind) in options" :key="ind" :class="[item.isChose?'item-slect-bg':'item-normal-bg']">
      <image :src="item.img" style="height: 100rpx;width: 100rpx"/>
      <view style="margin-top: 10rpx">{{item.title}}</view>
    </view>
  </view>
</template>

<script lang="ts">
import {Vue, Component, Prop, Watch} from "vue-property-decorator";

@Component({
  components: {}
})
export default class DataExceedHeadCardView extends Vue {
  @Prop() list?: any;
  @Prop() color?: string;
  @Prop() titleActiveColor?: string;
  @Prop() titleInactiveColor?: string;


  @Watch('list')
  dataChange() {
    // this.options = this.list ?? [];
  }

  created() {
    this.options = this.list ?? []
  }

  options: any = [];

  itemClick(index: any) {
    this.options.forEach((item: any) => {
      item.isChose = false;
    });
    this.options[index].isChose = true;
    this.$emit("onChange", index)
  }

}
</script>

<style scoped>
  .item-slect-bg{
    background: #ECF1FC;
    border-radius: 15rpx;
    font-size: 24rpx;
    padding: 20rpx 0rpx;
    font-weight: bold;
  }
  .item-normal-bg{
    border-radius: 15rpx;
    color: #666666;
    font-size: 24rpx;
    padding: 20rpx 0rpx;
  }
</style>